<!DOCTYPE html>
<html >

<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=9; IE=8; IE=7; IE=EDGE">
    <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
    <title>尚小惠商城--秒杀详情页</title>
    <link rel="icon" href="assets/img/favicon.ico">


    <link rel="stylesheet" type="text/css" href="css/webbase.css" />
    <link rel="stylesheet" type="text/css" href="css/pages-zoom.css" />
    <link rel="stylesheet" type="text/css" href="css/pages-seckill-item.css" />
    <link rel="stylesheet" type="text/css" href="css/widget-cartPanelView.css" />
    <link rel="stylesheet" href="https://unpkg.com/view-design/dist/styles/iview.css">
</head>

<body>

<!-- 头部栏位 -->
<!--页面顶部，由js动态加载-->
<script type="text/javascript" src="plugins/jquery/jquery.min.js"></script>
<div id="nav-bottom"></div>
<script type="text/javascript">$("#nav-bottom").load("top.html");</script>

<script type="text/javascript" src="js/plugins/jquery/jquery.min.js"></script>
<script type="text/javascript">
    $(function(){
        $("#service").hover(function(){
            $(".service").show();
        },function(){
            $(".service").hide();
        });
        $("#shopcar").hover(function(){
            $("#shopcarlist").show();
        },function(){
            $("#shopcarlist").hide();
        });

    })
</script>
<script type="text/javascript" src="js/widget/cartPanelView.js"></script>
<script type="text/javascript" src="js/model/cartModel.js"></script>
<script type="text/javascript" src="js/czFunction.js"></script>
<script type="text/javascript" src="js/plugins/jquery.easing/jquery.easing.min.js"></script>
<script type="text/javascript" src="js/plugins/sui/sui.min.js"></script>
<script type="text/javascript" src="js/plugins/jquery.jqzoom/jquery.jqzoom.js"></script>
<script type="text/javascript" src="js/plugins/jquery.jqzoom/zoom.js"></script>
<script type="text/javascript">
    $(function(){
        $("ul.btn-choose li a.btn-xlarge").click(function(){
            alert("钻中");
        });
        $("#star").click(function(){
            alert("关注成功");
        })
    })
</script>
</body>
<div class="py-container">
    <div id="item">
        <div class="crumb-wrap">
            <ul class="sui-breadcrumb">

            </ul>
        </div>
        <!--product-info-->
        <div class="product-info">
            <div class="fl preview-wrap">
                <!--放大镜效果-->
                <div class="zoom">
                    <!--默认第一个预览-->
                    <div id="preview" class="spec-preview">
                        <span class="jqzoom"><img :src="seckill.sku.images" /></span>
                    </div>
                </div>

            </div>
            <div class="fr itemInfo-wrap">
                <div class="sku-name">
                    <h4>{{seckill.sku.title}}</h4>
                </div>
                <div class="news">
                    <span><img src="/img/_/clock.png"/>秒杀</span>
                    <span class="overtime">距离结束：01:56:78</span>
                </div>
                <div class="summary">
                    <div class="summary-wrap">

                        <div class="fl title">
                            <i>秒杀价</i>
                        </div>
                        <div class="fl price">
                            <i>¥</i>
                            <em>{{ly.formatPrice(seckill.price)}}</em>
                            <span>原价：{{ly.formatPrice(seckill.sku.price)}}</span>
                        </div>
                        <div class="fr remark">

                        </div>
                    </div>
                    <div class="summary-wrap">
                        <div class="fl title">
                            <i>促　　销</i>
                        </div>
                        <div class="fl fix-width">
                            <i class="red-bg">加价购</i>
                            <em class="t-gray">满999.00另加20.00元，或满1999.00另加30.00元，或满2999.00另加40.00元，即可在购物车换购热销商品</em>
                        </div>
                    </div>
                </div>
                <div class="support">
                    <div class="summary-wrap">
                        <div class="fl title">
                            <i>支　　持</i>
                        </div>
                        <div class="fl fix-width">
                            <em class="t-gray">以旧换新，闲置手机回收  4G套餐超值抢  礼品购</em>
                        </div>
                    </div>
                    <div class="summary-wrap">
                        <div class="fl title">
                            <i>配 送 至</i>
                        </div>
                        <div class="fl fix-width">
                            <em class="t-gray">满999.00另加20.00元，或满1999.00另加30.00元，或满2999.00另加40.00元，即可在购物车换购热销商品</em>
                        </div>
                    </div>
                </div>
                <div class="clearfix choose">


                    <div class="summary-wrap">
                        <div class="fl title">

                        </div>
                        <div class="fl">
                            <ul class="btn-choose unstyled">
                                <li>
                                    <a v-if="goSeckill && num != 0" @click="rob" class="sui-btn  btn-danger addshopcar">立即抢购</a>
                                    <a v-if="num == 0" class="sui-btn  btn-danger addshopcar">已售空</a>
                                </li>
                                <li>
                                    <div class="sui-btn  btn-danger addshopcar" v-if="!goSeckill && num != 0">开始时间:{{time}}</div>
                                    <div class="sui-btn  btn-danger addshopcar" v-if="goSeckill && num != 0">结束时间:{{time}}</div>
                                </li>

                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!--product-detail-->
        <div class="clearfix product-detail">
            <div class="fl aside">
                <div class="shop">
                    <span class="fl">三星旗舰店</span><span class="fr"><a href="shop.html" target="_blank" class="sui-btn btn-bordered btn-danger">进入店铺</a></span>
                </div>
                <div class="clearfix"></div>
                <ul class="sui-nav nav-tabs tab-wraped">
                    <li class="active">
                        <a href="#index" data-toggle="tab">
                            <span>相关分类</span>
                        </a>
                    </li>
                    <li>
                        <a href="#profile" data-toggle="tab">
                            <span>推荐品牌</span>
                        </a>
                    </li>
                </ul>
                <div class="tab-content tab-wraped">
                    <div id="index" class="tab-pane active">
                        <ul class="part-list unstyled">
                            <li>手机</li>
                            <li>手机壳</li>
                            <li>内存卡</li>
                            <li>Iphone配件</li>
                            <li>贴膜</li>
                            <li>手机耳机</li>
                            <li>移动电源</li>
                            <li>平板电脑</li>
                        </ul>
                        <ul class="goods-list unstyled">
                            <li>
                                <div class="list-wrap">
                                    <div class="p-img">
                                        <img src="img/_/part01.png" />
                                    </div>
                                    <div class="attr">
                                        <em>Apple苹果iPhone 6s (A1699)</em>
                                    </div>
                                    <div class="price">
                                        <strong>
                                            <em>¥</em>
                                            <i>6088.00</i>
                                        </strong>
                                    </div>
                                    <div class="operate">
                                        <a href="javascript:void(0);" class="sui-btn btn-bordered">加入购物车</a>
                                    </div>
                                </div>
                            </li>
                            <li>
                                <div class="list-wrap">
                                    <div class="p-img">
                                        <img src="img/_/part02.png" />
                                    </div>
                                    <div class="attr">
                                        <em>Apple苹果iPhone 6s (A1699)</em>
                                    </div>
                                    <div class="price">
                                        <strong>
                                            <em>¥</em>
                                            <i>6088.00</i>
                                        </strong>
                                    </div>
                                    <div class="operate">
                                        <a href="javascript:void(0);" class="sui-btn btn-bordered">加入购物车</a>
                                    </div>
                                </div>
                            </li>
                            <li>
                                <div class="list-wrap">
                                    <div class="p-img">
                                        <img src="img/_/part03.png" />
                                    </div>
                                    <div class="attr">
                                        <em>Apple苹果iPhone 6s (A1699)</em>
                                    </div>
                                    <div class="price">
                                        <strong>
                                            <em>¥</em>
                                            <i>6088.00</i>
                                        </strong>
                                    </div>
                                    <div class="operate">
                                        <a href="javascript:void(0);" class="sui-btn btn-bordered">加入购物车</a>
                                    </div>
                                </div>
                                <div class="list-wrap">
                                    <div class="p-img">
                                        <img src="img/_/part02.png" />
                                    </div>
                                    <div class="attr">
                                        <em>Apple苹果iPhone 6s (A1699)</em>
                                    </div>
                                    <div class="price">
                                        <strong>
                                            <em>¥</em>
                                            <i>6088.00</i>
                                        </strong>
                                    </div>
                                    <div class="operate">
                                        <a href="javascript:void(0);" class="sui-btn btn-bordered">加入购物车</a>
                                    </div>
                                </div>
                                <div class="list-wrap">
                                    <div class="p-img">
                                        <img src="img/_/part03.png" />
                                    </div>
                                    <div class="attr">
                                        <em>Apple苹果iPhone 6s (A1699)</em>
                                    </div>
                                    <div class="price">
                                        <strong>
                                            <em>¥</em>
                                            <i>6088.00</i>
                                        </strong>
                                    </div>
                                    <div class="operate">
                                        <a href="javascript:void(0);" class="sui-btn btn-bordered">加入购物车</a>
                                    </div>
                                </div>
                            </li>
                        </ul>
                    </div>
                    <div id="profile" class="tab-pane">
                        <p>推荐品牌</p>
                    </div>
                </div>
            </div>
            <div class="fr detail">

                <div class="tab-main intro">
                    <ul class="sui-nav nav-tabs tab-wraped">
                        <li class="active">
                            <a href="#one" data-toggle="tab">
                                <span>商品介绍</span>
                            </a>
                        </li>
                        <li>
                            <a href="#two" data-toggle="tab">
                                <span>规格与包装</span>
                            </a>
                        </li>
                        <li>
                            <a href="#three" data-toggle="tab">
                                <span>售后保障</span>
                            </a>
                        </li>
                        <li>
                            <a href="#four" data-toggle="tab">
                                <span>商品评价</span>
                            </a>
                        </li>
                        <li>
                            <a href="#five" data-toggle="tab">
                                <span>手机社区</span>
                            </a>
                        </li>
                    </ul>
                    <div class="clearfix"></div>
                    <div class="tab-content tab-wraped">
                        <div id="one" class="tab-pane active">
                            <div v-html="seckill.introduction"></div>
                        </div>
                        <div id="two" class="tab-pane">
                            <p>规格与包装</p>
                        </div>
                        <div id="three" class="tab-pane">
                            <p>售后保障</p>
                        </div>
                        <div id="four" class="tab-pane">
                            <p>商品评价</p>
                        </div>
                        <div id="five" class="tab-pane">
                            <p>手机社区</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>

    </div>
</div>


<!-- 底部栏位 -->
<!--页面底部，由js动态加载-->
<div class="clearfix footer"></div>
<script type="text/javascript">$(".footer").load("foot.html");</script>
<!--页面底部END-->



<!--侧栏面板开始,由js动态加载-->
<script type="text/javascript" src="plugins/jquery/jquery.min.js"></script>
<div class="J-global-toolbar"></div>
<script type="text/javascript">$(".J-global-toolbar").load("side.html");</script>

<!--购物车单元格 模板-->
<script type="text/template" id="tbar-cart-item-template">
    <div class="tbar-cart-item" >
        <div class="jtc-item-promo">
            <em class="promo-tag promo-mz">满赠<i class="arrow"></i></em>
            <div class="promo-text">已购满600元，您可领赠品</div>
        </div>
        <div class="jtc-item-goods">
            <span class="p-img"><a href="#" target="_blank"><img src="{2}" alt="{1}" height="50" width="50" /></a></span>
            <div class="p-name">
                <a href="#">{1}</a>
            </div>
            <div class="p-price"><strong>¥{3}</strong>×{4} </div>
            <a href="#none" class="p-del J-del">删除</a>
        </div>
    </div>
</script>
<!--侧栏面板结束-->


<script src="./js/vue/vue.js"></script>
<script src="./js/axios.min.js"></script>
<script src="./js/common.js"></script>
<script src="./js/plugins/jquery/jquery.cookie.js"></script>
<script src="./js/pages/formatDate.js"></script>
<script src="https://unpkg.com/view-design/dist/iview.min.js"></script>
<script>
    var itemVm = new Vue({
        el:"#item",
        data:{
            ly,
            seckill : {},
            time : '',
            flag : false,
            images : "",
            goSeckill : false,
            num : 0
        },
        props:{
            endTime:{
                type: String,
  
            },
            startTime:{
                type: String,
            },
        },
        mounted () {
            let time = setInterval(()=>{
                if(this.flag == true){
                    clearInterval(time)
                }

                if((new Date().getTime() - new Date(this.startTime).getTime()) < 0 ){
                    // 活动尚未开始
                    this.timeDown(this.startTime)
                }else{
                    this.goSeckill = true;
                    this.timeDown(this.endTime)
                }

            },500)
        },
        created () {
            ly.http.get("/auth/verify").then(res=>{
                    let id = ly.getUrlParam("id");
                    ly.http.get("/seckill/"+id).then(res=>{
                            this.seckill = res.data;
                            this.endTime = this.seckill.endTime
                            this.startTime = this.seckill.startTime
                            this.num = this.seckill.num
                    }).catch((res)=>{
                            
                    })
            }).catch(()=>{

            })
        },
        methods: {
            timeDown (t) {
                const endTime = new Date(t);
                const nowTime = new Date();
                let leftTime = parseInt((endTime.getTime()-nowTime.getTime())/1000)
                let d = parseInt(leftTime/(24*60*60))
                let h = this.formate(parseInt(leftTime/(60*60)%24))
                let m = this.formate(parseInt(leftTime/60%60))
                let s = this.formate(parseInt(leftTime%60))
                if(leftTime <= 0){
                    this.flag = true
                    this.$emit('time-end')
                }
                this.time = `${d}天${h}小时${m}分${s}秒`     // 需要修改时间样式的话 ，比如需要什么30分钟倒计时，就只保留分和秒
            },
            formate (time) {
                if(time>=10){
                    return time
                }else{
                    return `0${time}`
                }
            },
            rob(){
                ly.http.get("/auth/verify").then(res=>{
                    ly.http.post("/seckill/order/"+this.seckill.id).then(res=>{
                        this.$Message.success("恭喜你,抢购成功,请前去订单界面支付");
                    }).catch((res)=>{
                        if(res.response.status === 403){
                            this.$Message.success("很遗憾,抢购失败,已售空");
                            
                        }else if(res.response.status === 400){
                            this.$Message.success("已抢购成功,无需重复操作");
                        }else{
                            this.$Message.error("很遗憾,抢购失败,已售空");
                        }
                    })
                }).catch(()=>{

                })
            }
        },
        components:{

        },
        computed: {

        },
    });
</script>


</html>